<template>
  <div class="main sales-rank">
    <section>
      <div class="filter-container">
        <el-select v-model="listQuery.month" class="filter-item" placeholder="时间筛选" filterable>
          <el-option v-for="item in monthList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table :data="officialUserList" v-loading="userListLoading" border highlight-current-row class="aaa">
        <el-table-column align="center" label="用户ID" prop="userDetailId"></el-table-column>
        <el-table-column align="center" label="用户昵称" prop="userName"></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column align="center" label="月份">
          <template slot-scope="scope">
            {{(scope.row.month+'').substr(0, 4)}}年{{(scope.row.month+'').substr(4, 5)}}月
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售金额+虚拟" prop="salesVolumeExt" >
          <template slot-scope="scope">
            {{scope.row.salesVolume}}<span v-show="scope.row.salesVolume!==null">元+</span> {{scope.row.salesVolumeExt}}<span v-show="scope.row.salesVolumeExt!==null">元</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排名">
          <template slot-scope="scope">
            {{scope.row.ranking===999999999?'未上榜':scope.row.ranking}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="选择替换前10用户" prop="replacerMobileNo"></el-table-column>
        <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" @click="showEdit(scope.row)" v-if="todayArr.indexOf(today)!==-1">查看详情</el-button>
            <el-button type="primary" plain size="mini" @click="showEdit(scope.row)" v-else>修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="btn-center">
        <el-button type="primary" @click="save" :disabled="todayArr.indexOf(today)!==-1">确认替换</el-button>
      </div> -->
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="用户ID" prop="userDetailId"></el-table-column>
        <el-table-column align="center" label="用户昵称" prop="userName"></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column align="center" label="月份">
          <template slot-scope="scope">
            {{(scope.row.month+'').substr(0, 4)}}年{{(scope.row.month+'').substr(4, 5)}}月
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售金额+虚拟">
          <template slot-scope="scope">
            {{scope.row.salesVolume}}<span v-show="scope.row.salesVolume!==null">元+</span>{{scope.row.salesVolumeExt}}<span v-show="scope.row.salesVolumeExt!==null">元</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排名">
          <template slot-scope="scope">
            {{scope.row.ranking===999999999?'未上榜':scope.row.ranking}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" v-if="listTotal > 0">
        <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" :page-sizes="[10, 20, 50, 100]" :total="listTotal" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>

      <!-- 修改弹窗 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :modal-append-to-body="false" width="90%">
        <el-form ref="form" :model="dialogFormData" label-width="130px" :disabled="todayArr.indexOf(today)!==-1">
          <el-form-item label="用户昵称" prop="userName" :rules="commonRules.notNullRule">
            <el-input v-model="dialogFormData.userName" placeholder="用户昵称" maxlength="12" />
          </el-form-item>
          <el-form-item label="虚拟销售额" prop="salesVolumeExt" :rules="commonRules.priceRuleZeroNull">
            <el-input v-model="dialogFormData.salesVolumeExt" placeholder="虚拟销售额" />
          </el-form-item>
           <el-form-item label="替换前10用户" prop="replacerMobileNo" >
           <template>
            <el-select placeholder="选择替换前10用户" v-model="dialogFormData.replacerMobileNo" clearable>
              <el-option v-for="item in mobileList" :key="item.key" :label="item.value" :value="item.value" ></el-option>
            </el-select>
          </template>
          </el-form-item>
           <el-form-item label="心得口号" prop="slogan" >
            <el-input v-model="dialogFormData.slogan" placeholder="心得口号，40字以内"  maxlength="40" />
          </el-form-item>
           <el-form-item label="心得技巧" prop="experience" >
            <!-- <el-input v-model=".experience" placeholder="心得技巧" /> -->
            <tinymce :height="200"  v-model="dialogFormData.experience" :id="tinymceId"></tinymce>
          </el-form-item>
          <el-form-item label="形象照" prop="imagePhotoUrl" >
            <el-upload
              class="avatar-uploader"
              accept="image/*"
              :action="upladUrl"
              name="file"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUploadImg">
            <img v-if="dialogFormData.imagePhotoUrl" :src="dialogFormData.imagePhotoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>     
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button  @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="handleSave" v-if="todayArr.indexOf(today)===-1">确 定</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
  export default {
     components: {
      Tinymce
    },
    name: 'salesRank',
    data () {
      return {
        tinymceId: 'vue-tinymce-' + +new Date(),
        // todayArr: [],
        todayArr: [15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 1, 2, 3, 4],
        userListLoading: false,
        listLoading: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 10,
          month: ''
        },
        list: [],
        listTotal: 0,
        today: null,
        mobileList: [],
        monthList: [],
        officialUserList: [],

        dialogTitle: '',
        dialogFormVisible: false,
        dialogFormData: {},
        btnLoading: false,
        rowData:{}
      }
    },
    created () {
      if (this.$store.getters.cachedViews.length === 0) {
        let myDate = new Date()
        this.today = myDate.getDate()
        this.getMothList()
      }
    },
    activated () {
      let myDate = new Date()
      this.today = myDate.getDate()
      this.getMothList()
    },
    methods: {
      search () {
        this.getOfficialUserList()
        this.getList()
        this.getRankList()
      },
      // 虚假排行榜-修改列表查询
      getOfficialUserList() {
        this.userListLoading = true
        this.request({
          url: '/bsnl-member/member/sales-ranking/officialUserList',
          method: 'get',
          params: {
            month: this.listQuery.month
          }
        }).then((res) => {
          this.officialUserList = res.data
          this.userListLoading = false
        }).catch(err => {
          console.log(err)
          this.officialUserList = []
          this.userListLoading = false
        })
      },
      // 虚假排行榜-月份
      getMothList () {
        this.request({
          url: '/bsnl-member/member/sales-ranking/month',
          method: 'get'
        }).then((res) => {
          this.monthList = res.data
          this.listQuery.month = this.monthList[this.monthList.length - 1].key
          this.getList()
          this.getRankList()
          this.getOfficialUserList()
        }).catch(err => {
          console.log(err)
          this.monthList = []
        })
      },
      // 虚假排行榜-排名前10手机号（下拉框）
      getRankList () {
        this.request({
          url: '/bsnl-member/member/sales-ranking/mobile',
          method: 'get',
          params: {
            month: this.listQuery.month
          }
        }).then((res) => {
          this.mobileList = res.data
        }).catch(err => {
          console.log(err)
          this.mobileList = []
        })
      },
      // 虚假排行榜-生成列表查询
      getList () {
        this.listLoading = true
        this.request({
          url: '/bsnl-member/member/sales-ranking/showList',
          method: 'post',
          data: this.listQuery
        }).then((res) => {
          this.list = res.rows
          this.listTotal = res.total
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.list = []
          this.listTotal = 0
          this.listLoading = false
        })
      },
      // 确认替换
      save () {
        this.request({
            url: '/bsnl-member/member/sales-ranking/officialUserList/confirmReplace',
            method: 'post',
            data: {month:this.listQuery.month}
          }).then(() => {
            this.$message.success('替换成功')
            this.getOfficialUserList()
            this.getList()
          }).catch(err => {
            console.log(err)
          })
      },
      handleCurrentChange (val) {
        this.listQuery.pageIndex = val
        this.getList()
      },
      handleSizeChange (val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      // 显示修改弹窗
      showEdit(row) {
        this.request({
          url: '/bsnl-member/member/sales-ranking/officialUserDetail',
          method: 'get',
          params: {
            month: row.month,
            id: row.userId
          }
        }).then((res) => {
          this.dialogFormData = { ...res.data }
          if (window.tinymce.get(this.tinymceId)) {
            window.tinymce.get(this.tinymceId).setContent(res.data.experience)
          }
          this.dialogFormVisible = true          
        }).catch(err => {
          console.log(err)
        })
        
      },
      handleSave() {
         this.$refs.form.validate(valid => {
            if (!valid) {
                return false;
            }
            const updateData = {
            ...this.dialogFormData,
            salesVolumeExt:this.dialogFormData.salesVolumeExt?this.dialogFormData.salesVolumeExt:0
          }
          this.request({
            url: '/bsnl-member/member/sales-ranking/officialUser/update',
            method: 'post',
            data:updateData
            
          }).then((res) => {
            this.getOfficialUserList()  
            this.getList()
            this.dialogFormVisible = false
            this.$message.success('修改成功')
          }).catch(err => {
            console.log(err)
          })
         })          
      },
      uploadSuccess(res) {
        this.dialogFormData.imagePhotoUrl = this.replaceImgUrl(res.filePath);
      },
      beforeUploadImg(file) {
        if (!file.type.match('image/')) {
          this.$message.error('请上传图片')
          return false
        }
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return isLt5M
      },
    }
  }
</script>
<style lang="scss" scoped>
.sales-rank {
  .btn-center {
    text-align: center;
  }
}
.aaa{
   margin-bottom: 20px;
}
/deep/ .el-dialog {
  max-width: 1150px !important;
}
</style>